<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('学员订单列表')">

</head>
<body>
<div id="content" class="col-lg-12 col-sm-12">
    <div class="row">
        <div class="box col-md-12" style="padding: 0;margin-top: 5px;">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>
                        <i class="glyphicon glyphicon-list"></i> <span th:text="${param.loginName}"></span>订单列表
                    </h2>
                    <div class="box-icon">
                        <a href="javascript:void(0);" id="smaller" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="box-content">
                    <form class="form-inline form-search " role="form" th:action="@{'/order/list/'+${personId}}">
                        <div style="text-align: center;padding-bottom: 5px;">
                            <a th:if="${session.menuMap[86] != null}" id="add" href="javascript:" class="btn btn-primary btn-sm " role="button" >
                                <span class="glyphicon glyphicon-plus-sign"></span> 添 加  </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a th:if="${session.menuMap[86] != null}" id="addCaseShare" th:data-addUserName="${session.loginname}" th:data-userId="${session.userid}" th:data-personId="${personId}" class="btn btn-primary btn-sm " role="button" >
                                <span class="glyphicon glyphicon-plus-sign"></span> 添加caseShare  </a>
                        </div>

                    </form>
                    <table class="table table-striped table-bordered table-hover footable" data-show-toggle="false">
                        <thead>
                            <tr>
                                <th class="text-center">套餐名称</th>
                                <th class="text-center" data-breakpoints="xs">套餐类型</th>
                                <th class="text-center" data-breakpoints="xs">套餐价格</th>
                                <th class="text-center" data-breakpoints="xs">支付金额</th>
                                <th class="text-center" data-breakpoints="xs">购买数量</th>
                                <th class="text-center" data-breakpoints="xs">赠送数量</th>
                                <th class="text-center" >总课时/币</th>
                                <th class="text-center">使用数量</th>
                                <th class="text-center">剩余数量</th>
                                <th class="text-center" data-breakpoints="xs">购买日期</th>
                                <th class="text-center" data-breakpoints="xs">生效日期</th>
                                <th class="text-center">到期日期</th>
                                <th class="text-center">订单状态</th>
                                <th class="text-center" data-breakpoints="xs">进度完成率</th>
                                <th class="text-center" data-breakpoints="all" data-title="订单说明">备注</th>
                                <th class="text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr th:each="item,itemStat:${pageInfo.list}" th:style="'display:'+(${isHide} ? 'none' : '')" th:class="${isHide?'isHidden':''}"
                            th:with="isHide=${item.state==0 || item.state==3 || (item.state==4 && #dates.millisecond(item.buyTime)+30*60*60*24*1000<#dates.millisecond(#dates.createNow())) || item.state==-1 || item.state==-2 || item.state==-3}">
                            <td class="text-center">
                                <span th:text="${item.packageName}"></span><br>
                                <a href="javascript:" th:if="${item.materialId!=null}" th:onclick="openTextbookImg([[${item.materialId}]],[[${item.materialPage}]])" th:text="${item.txtBooksName}"></a>
                                <span th:if="${item.materialId==null}">无</span>
                            </td>
                            <td class="text-center" th:switch="${item.packageTypeFlag}">
                                <span class="label-success label" th:case="0">正式套餐</span>
                                <span class="label-warning label" th:case="1">DEMO</span>
                                <span class="label-success label" th:case="2">包月套餐</span>
                                <span class="label-info label" th:case="3">促销套餐</span>
                                <span class="label-primary label" th:case="4">公开课套餐</span>
                                <span class="label-warning label" th:case="5">OPT</span>
                                <span class="label-warning label" th:case="6">OC课</span>
                                <span class="label-default label" th:case="7">测试课</span>
                            </td>
                            <td class="text-center" th:text="${item.salePrice.stripTrailingZeros().toPlainString()}+'元'"></td>
                            <td class="text-center" th:text="${item.payMoney.stripTrailingZeros().toPlainString()}+'元'"></td>
                            <td class="text-center" th:text="${item.buycount+' '+(item.currencyName)}"></td>
                            <td class="text-center" th:text="${item.gift+' '+(item.currencyName)}"></td>
                            <td class="text-center" th:text="${item.lessonCount+' '+(item.currencyName)}"></td>
                            <td class="text-center" th:text="${item.strLearnedClass.stripTrailingZeros().toPlainString()+' '+(item.currencyName)}"></td>
                            <td class="text-center" th:text="${(item.lessonCount-item.strLearnedClass).stripTrailingZeros().toPlainString()+' '+(item.currencyName)}"></td>
                            <td class="text-center" th:text="${#dates.format(item.buyTime,'yyyy/MM/dd H:m:s')}"></td>
                            <td class="text-center" th:text="${#dates.format(item.startDate,'yyyy/MM/dd')}"></td>
                            <td class="text-center" th:text="${item.surplusValid}"></td>
                            <td class="text-center" th:switch="${item.state}">
                                <span class="label-default label" th:case="0">已终止</span>
                                <span class="label-success label" th:case="1">有效</span>
                                <span class="label-danger label" th:case="2">已冻结</span>
                                <span class="label-success label" th:case="3">审核未通过</span>
                                <span class="label-danger label" th:case="4">未付款</span>
                                <span class="label-warning label" th:case="5">待审核</span>
                                <span class="label-danger label" th:case="-1">已过期</span>
                                <span class="label-danger label" th:case="-2">已学完</span>
                                <span class="label-danger label" th:case="-3">已学完</span>
                            </td>
                            <td class="text-center" th:text="${item.speedProgress}+'%'"></td>
                            <td th:utext="${item.remark}"></td>
                            <td>

                                <span th:if="${item.state==1 || item.state==3 || item.state==-1 || item.state==2}">
                                    <button th:if="${session.menuMap[88] != null}" class="btn btn-danger btn-xs" th:onclick="|openWindow(this)|" th:data-url="@{'admin/orders_initEditInfo.action?kcOrders.id='+${item.id}}" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 修改课时</button>

                                    <button th:if="${session.menuMap[97] != null}" class="btn btn-info btn-xs" th:onclick="|openWindow(this)|" th:data-url="@{'admin/orders_initEditMaterials.action?kcOrders.id='+${item.id}}" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 修改教材 </button>

                                    <button th:if="${session.menuMap[98] != null}" class="btn btn-warning btn-xs" th:onclick="|openWindow(this)|" th:data-url="@{'admin/orders_initEditValid.action?kcOrders.id='+${item.id}}" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 修改有效期 </button>

                                    <button th:if="${session.menuMap[93] != null}" class="btn btn-danger btn-xs" th:id="'delpopover'+${item.id}" role="popover" style="margin-bottom:3px;" data-placement="left" th:onclick="abolishOrderHtml([[${item.id}]],[[${item.personId}]])"><i class="glyphicon glyphicon-trash icon-white"></i> 终止订单 </button>

                                    <button th:if="${session.menuMap[272] != null}" class="btn btn-warning btn-xs" th:onclick="editBuyTime([[${item.id}]],[[${#dates.format(item.buyTime,'yyyy-MM-dd HH:mm:ss')}]])" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 修改购买日期 </button>

                                </span>
                                <button th:if="${session.menuMap[97] != null && (item.state==-2  || item.state==-3)}"class="btn btn-info btn-xs" th:onclick="|openWindow(this)|" th:data-url="@{'admin/orders_initEditMaterials.action?kcOrders.id='+${item.id}}" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 修改教材 </button>
                                <button th:if="${session.menuMap[330] != null && item.state==1}"class="btn btn-primary btn-xs" th:onclick="openSplitGiftWin([[${item.id}]])"  style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 拆分赠送订单 </button>
                                <span th:if="${item.state==5 && session.menuMap[90] != null}">
                                    <button class="btn btn-warning btn-xs" th:id="'popover'+${item.id}" role="popover" style="margin-bottom:3px;" data-placement="left" th:onclick="examineHtml([[${item.id}]],'1',[[${item.oldOrderId}]])"><i class="glyphicon glyphicon-edit icon-white"></i> 通过 </button>
                                    <button class="btn btn-danger btn-xs" th:id="'popover'+${item.id}" role="popover" style="margin-bottom:3px;" data-placement="left" th:onclick="examineHtml([[${item.id}]],'3',[[${item.oldOrderId}]])"><i class="glyphicon glyphicon-edit icon-white"></i> 驳回 </button>
                                </span>
                                <button th:if="${session.menuMap[302] != null && item.state==1}" type="button" href="#" class="btn btn-info btn-xs" th:id="'orderflag'+${item.id}" rel="popover" th:onclick="createOrderFlagHtml([[${item.id}]])" th:text="'挖券减半('+${item.weightFlag==1?'是':'否'}+')'">挖券减半(是})</button>
                                <button th:if="${session.menuMap[92] != null}" class="btn btn-success btn-xs" th:onclick="|openWindow(this)|" th:data-url="@{'admin/orders_viewKcOrders.action?kcOrders.id='+${item.id}}" style="margin-bottom:3px;"><i class="glyphicon glyphicon-zoom-in icon-white"></i> View</button>
                                <button th:if="${session.menuMap[122] != null && item.state==4}" class="btn btn-warning btn-xs" th:onclick="|openWindow(this)|" th:data-url="@{'admin/orders_installmentPayment.action?kcOrders.id='+${item.id}+'&sphone='+${sphone}}" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-usd icon-white"></i> 分期支付</button>
                                <button th:if="${session.menuMap[354] != null && item.state==1}"class="btn btn-primary btn-xs" th:onclick="changeNextMaterial([[${item.orderBookId}]])"  style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 切换下一册教材 </button>
                            </td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="15" style="height:5px;text-align: center;cursor: pointer;padding:0px;"
                                onclick="$('.isHidden').toggle();$(this).find('span').toggleClass('glyphicon-chevron-down');$(this).find('span').toggleClass('glyphicon-chevron-up');if($(this).attr('title')=='显示隐藏内容'){$(this).attr('title','隐藏内容')}else{$(this).attr('title','显示隐藏内容');}"
                                title="显示隐藏内容">
                                <span class="glyphicon glyphicon-chevron-down"></span>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                    <div th:include="include/pageinfo::pager"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="layer-photos-demo" class="layer-photos-demo" style="display:none;">
        <img layer-src="http://localhost/images/mid_banner/etalk2.jpg" alt="图片名">
        <img layer-src="http://localhost/images/mid_banner/etalk2.jpg" alt="图片名">
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script src="https://hkres.etalk365.com/public/lib/popper/1.15.0/umd/popper.min.js"></script>
    <script src="../../static/textbook/viewPage.js" th:src="@{/static/textbook/viewPage.js?v=202105302259}"></script>
    <script>
        $(function() {
            $('.footable').footable();
            $("#add").click(function(){
                let addUrl="[[${session.oldCrmUrl}]]admin/orders_initAdd.action?kcOrders.personId=[[${personId}]]&userToken=[[${session.userToken}]]";
                layer.open({
                    type: 2,
                    title: false,
                    closeBtn: 1, //显示关闭按钮
                    shade: [0],
                    area: ['98%', '98%'],
                    //offset: 'rb', //右下角弹出
                    // time: 2000, //2秒后自动关闭
                    anim: 2,
                    content: [addUrl, 'yes'], //iframe的url，no代表不显示滚动条
                    end: function () {
                        location.reload(true);
                    }
                });
            });
            //添加分享按钮
            $("#addCaseShare").click(function(){
                let $this = $(this);
                /*$.ajax({
                    type:'post',
                    url:'ajax/orders_caseShareIsExist.action',
                    data:{'personId' : $(this).attr("personId")},
                    cache:false,
                    dataType:'json',
                    success:function(data){
                        if(data.result > 0){
                            layer.msg("该学员case分享已存在，请勿重复提交！");
                            return;
                        }else{*/
                            let url = "/caseShareManage/oldToAddCase?personId=[[${personId}]]&addUserId=[[${session.userid}]]&addUserName=[[${session.loginname}]]";
                            layer.open({
                                type: 2,
                                title: false,
                                closeBtn: 1, //显示关闭按钮
                                shade: [0],
                                area: ['60%', '95%'],
                                //offset: 'rb', //右下角弹出
                                // time: 2000, //2秒后自动关闭
                                anim: 2,
                                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                                end: function () {
                                    // location.reload();
                                }
                            });
                      /*  }
                    },
                    error : function(xhr, type, exception) {
                        alert(xhr.responseText, "Failed");
                    }
                });*/
            });

        });

        //打开旧版页面的按钮
        function openWindow(obj) {
            let url="[[${session.oldCrmUrl}]]"+$(obj).data("url")+"&userToken=[[${session.userToken}]]";
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                shade: [0],
                area: ['80%', '90%'],
                //offset: 'rb', //右下角弹出
                // time: 2000, //2秒后自动关闭
                anim: 2,
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () {
                    location.reload(true);
                }
            });
        }

        function editBuyTime(orderId,buyTime){
            let html = '<div class="form-horizontal" id="css" style="margin-top:7%;margin-left:2%;" role="form"><div class="form-group">' +
                '<label  for="firstname" class="col-sm-3 control-label">购买日期:</label>' +
                '<div class="col-sm-8">' +
                '<input id="buyTime"  value="'+buyTime+'" class="form-control" maxlength="10"  placeholder="请选择年份" onFocus="WdatePicker({dateFmt:\'yyyy-MM-dd HH:mm:ss\'})" autocomplete="off"/>'+
                '</div>' +
                '</div>'+
                '<div class="form-group" style="margin-left:30%;margin-top:6%">' +
                '<button class="btn " type="button" onclick="layer.closeAll();">关闭</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
                '<button class="btn btn-primary" onclick="subBuyTime(\''+orderId+'\')">提交</button>'+
                '</div>'+
                '</div>'+
                '</div>';
            //弹窗
            layer.open({
                type: 1,
                // skin: 'layui-layer-rim', //加上边框
                title:'修改购买日期',
                resize:false,
                scrollbar: false,
                area: ['380px', '200px'], //宽高
                content: html
            });
            //去掉滚动条
            $("#css").parent().css("overflow","scroll").css("overflow-x","hidden").css("overflow-y","hidden");
        }
        //购买时间修改提交
        function subBuyTime(orderId){
            if($("#buyTime").val() ==''){
                layer.msg("请选择要修改的订单时间", {icon: 2});
                return;
            }
            $.ajax({
                type:'post',
                url:'/order/modify/buy/time',
                data:{'orderId' : orderId,"buyTime" : $("#buyTime").val()},
                cache:false,
                dataType:'json',
                success:function(data){
                    if(data.status > 0){
                        layer.msg("订单购买时间修改成功", {icon: 1});
                        setTimeout(function () {
                            location.reload(true);
                        },2000);
                    }else{
                        layer.msg("订单购买时间修改失败", {icon: 2});
                    }
                },
                error : function(xhr, type, exception) {
                    alert(xhr.responseText, "Failed");
                }
            });
        }

        //终止订单
        function abolishOrderHtml(id,personId) {
            let obj=$("#delpopover"+id);
            $("[role=popover]").popover('destroy');
            let dataContent='<div style="text-align: center;">';
            dataContent+='<div><textarea class="form-control" id="remark" rows="3" data-toggle="tooltip" placeholder="请输入终止订单的原因......"></textarea></div>';
            dataContent+='<div style="text-align: center;margin-top:5px;"><button type="button" class="btn btn-default" onclick="$(\'#delpopover'+id+'\').popover(\'destroy\');">取消</button>&nbsp;&nbsp;';
            dataContent+='<button type="button" class="btn btn-danger" onclick="abolishOrderSubmit(\''+id+'\','+personId+')">确认</button></div>';
            dataContent+='<div>';
            let dataTitle='<h4>您确定要终止本订单吗？</h4>';
            obj.popover({
                html : true ,
                title: dataTitle,
                content: dataContent,
                placement: 'left'
            });
            obj.popover("show");

        }
        //终止订单提交数据
        function abolishOrderSubmit(orderId,personId){
            if($.trim($("#remark").val())===""){
                layer.msg("请输入终止订单原因", {icon: 2});
                return false;
            }
            $.ajax({
                type:'post',
                url:'/order/abolish',
                data:{'orderId' : orderId,"personId":personId,'remark':$("#remark").val()},
                cache:false,
                dataType:'json',
                success:function(data){
                    if(data.status === 1 ){
                        $("[role=popover]").popover('destroy');
                        window.location.reload(true);
                    }else {
                        layer.msg(data.errMsg, {icon: 2});
                    }
                },
                error : function(xhr, type, exception) {
                    alert(xhr.responseText, "Failed");
                }

            });
        }

        //打开拆分订单页面
        function openSplitGiftWin(orderId) {
            let url="/order/split/gift/"+orderId;
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                shade: [0],
                area: ['80%', '90%'],
                //offset: 'rb', //右下角弹出
                // time: 2000, //2秒后自动关闭
                anim: 2,
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () {
                    //location.reload(true);
                }
            });
        }

        //审核订单操作
        function examineHtml(id,state,oldOrderId) {
            $("[role=popover]").popover('destroy');
            let dataContent='<div style="text-align: center;">';
            if(state==1){
                dataContent+='<div style="text-align: left;margin-bottom:10px;">警告：你确定通过此订单吗？</div>';
            }else if(state==3){
                dataContent+='<div style="text-align: left;">你确定驳回此订单吗？</div>';
            }
            dataContent+='<button type="button" class="btn btn-default" onclick="$(\'#popover'+id+'\').popover(\'destroy\');">稍后再审</button>&nbsp;&nbsp;';
            dataContent+='<button type="button" class="btn btn-danger" id="ok" onclick="ajaxExamine(\''+id+'\','+state+',\''+oldOrderId+'\')">确定</button></div>';
            var dataTitle='<span style="font-weight:bold;">订单审核</span>';
            $("#popover"+id).popover({
                html : true ,
                title: dataTitle,
                content: dataContent,
                placement: 'left'
            });
            $("#popover"+id).popover("show");
            let mycount=setInterval(function(){$("#popover"+id).popover('destroy'); clearTimeout(mycount)},6000);
        }
        //审核订单提交数据
        function ajaxExamine(id,state,oldOrderId){
            $("#ok").attr("disabled",true);
            $.ajax({
                type:'post',
                url:'[[${session.oldCrmUrl}]]ajax/orders_examineKcOrders.action?userToken=[[${session.userToken}]]',
                data:{'kcOrders.id' : id,'kcOrders.state' : state,'oldOrderId':oldOrderId},
                cache:false,
                dataType:'jsonp',
                success:function(data){
                    if(data.state ==1 ){
                        // view("修改成功！");
                        // alert("修改成功！");
                        $("#popover"+id).popover('destroy');
                            window.location.reload(true);
                    }else if (data.state ==-1 ) {
                        alert("您还没有登录，请您重新登录！");
                        window.location="admin/login_loginout.action";
                    }else{
                        console.log(data);
                    }
                },
                error : function(xhr, type, exception) {
                    // view("异常！");
                    alert(xhr.responseText, "Failed");
                    // alert("删除数据异常，请与管理员联系！");
                }

            });
        }
        
        function changeNextMaterial(id) {
            layer.confirm('您是否确认需要切换到下一本教材？', {
                btn: ['确认','取消'] //按钮
            }, function(){
                let index=layer.load(3);
                let param=[];
                param.push(id);
                let url="/order/change/next/textbook";
                $.ajax({
                    type:'post',
                    url:url,
                    data:{'orderBookIds' : param.join()},
                    cache:false,
                    dataType:'json',
                    success:function(data){
                        if (data.status===1){
                            if (data.successNum===1){
                                layer.msg('切换下一本教材成功', {icon: 1},function (){
                                    location.reload();
                                });
                            }else {
                                layer.close(index);
                                layer.msg('切换下一本教材失败，请检查教材编号是否规范。', {icon: 2});
                            }
                        }else {
                            layer.close(index);
                            layer.msg(data.errMsg, {icon: 2});
                        }
                    },
                    error : function(xhr, type, exception) {
                        // view("异常！");
                        alert(xhr.responseText, "Failed");
                        // alert("删除数据异常，请与管理员联系！");
                    }
                });
            }, function(){

            });

        }
    </script>

</div>
</body>
</html>